class TabBox {
    constructor(domRoot) {
        // 初始化DOM元素
        this.initDom(domRoot);

        /* 当前标签序号 */
        this.currentIndex = 0;
        this.autoplayTimer = null;

        // 初始化事件监听器（交互）
        this.initEventListeners();
    }

    /* 初始化DOM元素 */
    initDom(domRoot) {
        /* 在DOM根元素中找出所有子元素 绑定到实例 */
        this.tabs = domRoot.querySelectorAll("ul>li");
        this.contents = domRoot.querySelectorAll("ol>li");
        this.contentBox = domRoot.querySelector("ol");
    }

    /* 初始化事件监听 */
    initEventListeners() {
        /* 点击第index个标签 跳转到指定内容 */
        this.tabs.forEach((tab, index) => {
            /* 为每一枚标签添加点击事件 */
            tab.onclick = (e) => {
                // 当前实例（this）切换到指定标签
                this.switchTo(index);
            };
        });

        /* 鼠标悬浮于contentBox之上时 停止轮播 移走时继续轮播 */
        this.contentBox.addEventListener("mouseenter", () => {
            this.stopAutoplay();
        });
        this.contentBox.addEventListener(
            "mouseleave",
            this.startAutoplay.bind(this)
        );
    }

    /* 将传入的【每个数组中的每个元素】都取消active样式 */
    static clearActiveClass(...elementArrs) {
        elementArrs.forEach((elementArr) => {
            for (let i = 0; i < elementArr.length; i++) {
                elementArr[i].classList.remove("active");
            }
        });
    }

    /* 切换到指定标签 */
    switchTo(index) {
        console.log("switchTo", index);
        // 将所有的标签和内容全都点灭
        TabBox.clearActiveClass(this.tabs, this.contents);

        // 将指定序号的标签和内容点亮
        this.tabs[index].classList.add("active");
        this.contents[index].classList.add("active");
    }

    /* 自动轮播 */
    startAutoplay() {
        // console.log("this in startAutoplay", this);
        if (!this.autoplayTimer) {
            this.autoplayTimer = setInterval(() => {
                this.currentIndex++;
                this.currentIndex =
                    this.currentIndex > 2 ? 0 : this.currentIndex;

                console.log("this in timer", this);
                this.switchTo(this.currentIndex);
            }, 1000);
        }
    }

    /* 停止轮播 */
    stopAutoplay() {
        if (this.autoplayTimer) {
            clearInterval(this.autoplayTimer);
            this.autoplayTimer = null;
        }
    }
}
